<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>煤球对战平台 - 忘记密码</title>
	<link rel="stylesheet" href="home/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="home/css/index.css">
	<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		.main { margin-top: 3%; }
		#regbtn { margin-right: 15px; background-color: yellowgreen; }
		#veryfy { width: 50%; float: left; margin-right: 1em; }
		.verifyimg { float: left; }
		.form-bg{ background: #00b4ef; }

		.form-horizontal{
		    background: #fff;
		    padding-bottom: 40px;
		    border-radius: 15px;
		    text-align: center;
		}
		.form-horizontal .heading{
		    display: block;
		    font-size: 35px;
		    font-weight: 700;
		    padding: 35px 0;
		    border-bottom: 1px solid #f0f0f0;
		    margin-bottom: 30px;
		}
		.form-horizontal .form-group{
		    padding: 0 40px;
		    margin: 0 0 25px 0;
		    position: relative;
		}
		.form-horizontal .form-control{
		    background: #f0f0f0;
		    border: none;
		    border-radius: 20px;
		    box-shadow: none;
		    padding: 0 20px 0 45px;
		    height: 40px;
		    transition: all 0.3s ease 0s;
		}
		.form-horizontal .form-control:focus{
		    background: #e0e0e0;
		    box-shadow: none;
		    outline: 0 none;
		}
		.form-horizontal .form-group i{
		    position: absolute;
		    top: 12px;
		    left: 60px;
		    font-size: 17px;
		    color: #c8c8c8;
		    transition : all 0.5s ease 0s;
		}
		.form-horizontal .form-control:focus + i{
		    color: #00b4ef;
		}
		.form-horizontal .fa-question-circle{
		    display: inline-block;
		    position: absolute;
		    top: 12px;
		    right: 60px;
		    font-size: 20px;
		    color: #808080;
		    transition: all 0.5s ease 0s;
		}
		.form-horizontal .fa-question-circle:hover{ color: #000; }

		.form-horizontal .text{
		    float: left;
		    margin-left: 7px;
		    line-height: 20px;
		    padding-top: 5px;
		}
		.form-horizontal .btn{
		    float: right;
		    font-size: 14px;
		    color: #fff;
		    background: #00b4ef;
		    border-radius: 30px;
		    padding: 10px 25px;
		    border: none;
		    text-transform: capitalize;
		    transition: all 0.5s ease 0s;
		}
		@media only screen and (max-width: 479px){
		    .form-horizontal .form-group{ padding: 0 25px; }
		    .form-horizontal .form-group i{ left: 45px; }
		    .form-horizontal .btn{ padding: 10px 20px; }
	</style>
	<!--[if IE]>
		<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
    <div class="container">
        <div class="row main" id="login">
            <div class="col-md-offset-3 col-md-6">
                <form class="form-horizontal" action="{{url('/user/forgot')}}" method="post">
                	{!! csrf_field() !!}
                    <span class="heading">忘记密码 </span>
                    <div class="form-group">
                        <input type="text" class="form-control" name="user_name"  id="user_name" placeholder="用户名或手机号">
                        <i class="fa fa-user"></i>
                    </div>
					<div class="form-group">
						<input type="text" class="form-control" name="phone"  id="phone" placeholder="用户手机号">
						<i class="fa fa-lock"></i>
                    </div>
					<div class="form-group">
                        <input type="text" class="form-control" name="veryfy" id="veryfy" placeholder="手机验证码">
                        <i class="fa fa-lock"></i>
						<button type="button" id="send" class="btn btn-default">发送手机验证码<span id="time" class="pull-right"></span></button>
						
                    </div>
                    <div class="form-group">
                        <button type="submit" id="sub" class="btn btn-default">重置密码</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
	<script src="home/js/jquery-1.11.1.min.js"></script>
	<script src="home/bootstrap/js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#register').hide();
		});

		var send = $('#send');
		var phone = $('#phone');
		send.click(function(){
			$.ajax({
				url:'/send',
				type:'POST',
				data:{"input":phone.val()},
				async:true,
				success:function(ev){
				  if (ev) {
					console.log(ev);
				  } else {
					alert('一分钟之内只允许发送一次');
				  }
				}
			})
		});
		//点击后显示倒计时,5秒后可点击
		$("#send").click(function(){
			$(this).attr('disabled', true);//点击后按钮增加disabled
			var time = 60;//倒计时的开始时间
			setInterval(function(){//执行倒计时
				(time>=0) && $("#time").html(time);//写入倒计时的初始值
				time -= 1;//时间数值每次减一
				(time>=0) && $("#time").html(time);//将减少后的时间值重新写入
				(time< 0) && $("#time").html("");//时间减少到零后清空时间数值
			},1000);//每秒执行一次
			clearInterval();//清空定时
			setTimeout("$('#send').removeAttr('disabled')", 60000);//5秒移除disable属性
		});

	</script>
</html>

